<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外卖APP</title>

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="assets/css/common.less">

    <!-- 品类页面 -->
    <link rel="stylesheet/less" href="assets/css/index3.less">
</head>
<body>
    <!-- 品类 -->
    <div class="box3">

    <!-- 头部背景图 -->
    <div class="bjt">
        <!-- <img src="assets/images/shop_bg.png" alt=""> -->
    </div>

    <!-- 悬浮头部 -->
    <div class="top">
        <div class="emo">
            <p>小包子的火锅店</p>
            <p>欢迎顾客们光临小包子的火锅店，保证让您有不一样的美食体验</p>
            <div class="info">
                <a><img src="assets/images/a.png" alt=""></a>
                <a><img src="assets/images/b.png" alt=""></a>
                <a><img src="assets/images/c.png" alt=""></a>
                <a><img src="assets/images/d.png" alt=""></a>
            </div>
            <p class="three">折扣：10%</p>
            <p>其他折扣：满20减10.满30减15</p>
        </div>
    </div>
    <!-- 中间隔开 -->
    <div class="xx">
        <div class="ru">点菜</div>
    </div>
    <!-- 点菜 -->
    <div class="conten">
        <ul>
            <li class="bigin">热门</li>
            <li>折扣</li>
            <li>便当</li>
            <li>蔬菜</li>
            <li>肉类</li>
        </ul>
        <div class="ofn">
            <div class="going ons">
                <div class="good">
                    <div class="left"><img src="assets/images/food.png" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>



                <div class="good">
                    <div class="left"><img src="assets/images/food.png" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food.png" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food.png" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food.png" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>


            </div>
            <div class="ons">
                <div class="good">
                    <div class="left"><img src="assets/images/food1.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food1.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food1.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food1.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food1.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
            </div>
            <div class="ons">
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
            </div>
            <div class="ons">
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>

            </div>
            <div class="ons">
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                <div class="good">
                    <div class="left"><img src="assets/images/food2.jpg" alt=""></div>
                    <div class="right">
                        <p class="a">青菜</p>
                        <p class="b">说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
                        <p class="c">月销&nbsp;200</p>
                        <p class="dss">300ks <span><s>5000ks</s></span></p>
                        <div class="cao">1</div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>








        <!-- 底部 -->
        <footer class="botms">
            <div class="lft">
                <div class="tu"><img src="assets/images/shopcar.png" alt=""></div>
                <div class="zi">
                    <p>10000ks</p>
                    <p>另需配送费￥2元</p>
                </div>
            </div>
            <a href="index.html">
                <div class="rit">去支付</div>
            </a>
            
        </footer>

    </div>










</body>
</html>
<!-- 解析less的文件 -->
<script src="assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="assets/js/jquery.min.js"></script>

<!-- 判断 -->
<script type="text/javascript">
    $(function() {
      $(".conten li").each(function(index) {
          $(".conten li").each(function(index) {
              $(this).mouseover(function() {
                  $("li.bigin").removeClass("bigin"); //注意这里
                  $(this).addClass("bigin"); //注意这里
                  $(".ofn .going").removeClass("going");
                  // eq() 方法将匹配元素集缩减值指定 index 上的一个。
                  $(".ofn .ons").eq(index).addClass("going");
              });
          })
      })
    })
</script>


